import { defineComponent,reactive,toRefs,computed } from "vue";
import { useStore } from "vuex";
// import {Directions,jQuery,Name,Days} from '../Directions'
type Date = {
  a: number,
  arr: number[]
}
// let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// jQuery.ajax('/api/get_something');
// console.log(jQuery.version);
// const e = new jQuery.Event();
// e.blur(jQuery.EventType.CustomClick);

// let settings: jQuery.AjaxSettings = {
//   method: 'POST',
//   data: {
//       name: 'foo'
//   }
// };
// let name: Name = {
//   sex: '1',
//   z: 'q'
// }
// let b1: Boolean = new Boolean(1);
// let e1: Error = new Error('Error occurred');
// let d11 = new Date();
// let r1: RegExp = /[a-z]/;

// let body: HTMLElement = document.body;
// let allDiv: NodeList = document.querySelectorAll('div');
// document.addEventListener('click', function(e: MouseEvent) {
//   // Do something
// });
// jQuery.ajax('/api/post_something', settings);
// let tom: [string, number] = ['Tom', 25];
// type EventNames = 'click' | 'scroll' | 'mousemove';
// function handleEvent(ele: Element, event: EventNames) {
//     // do something
// }
// console.log(Days["Sun"] === 0); // true
// console.log(Days["Mon"] === 1); // true
// console.log(Days["Tue"] === 2); // true
// console.log(Days["Sat"] === 6); // true

// console.log(Days[0] === "Sun"); // true
// console.log(Days[1] === "Mon"); // true
// console.log(Days[2] === "Tue"); // true
// console.log(Days[6] === "Sat"); // true
// ts的申明文件 库里有申明文件直接用 库里没有社区去查询安装 然后再用 社区没有就自己安装对象库名字的申明文件 然后在tsconfig 配置

// 泛型可以有接口 类 函数 还能多泛型
import './three.css'
import img from '../assets/logo.png'
export default defineComponent({
  setup(props,ctx) {
    let store = useStore()
    let data:Date= reactive({
      a: 123,
      arr: [1,2,3]
    } as Date)
    let msg = computed(()=>store.state.msg)
    return {
      ...toRefs(data),msg
    }
  },
  emits: ['update:title'],
  props: {
    title: {
      type: Number
    }
  },
  methods: {
    add() {
      this.a++
      this.$emit('update:title',this.a)
      let {arr} = this
    },
    da() {
      
    }
  },
  render() {
    return (
      <div class="home">
        <div id={'box'}>123</div>
        <img onClick={this.da} alt="Vue logo" src={img}/>
        123SADDD {this.a}{this.msg}
        <button onClick={this.add}>ass</button>
        {this.arr.map(res => {
          return <p>{ res}</p>
        })}
      </div>
      
    );
  },
});